import React from 'react';
import classNames from 'classnames';
import Menu from './Menu';
import Icon from '../Icon';
import Dropdown from '../Dropdown';

class SubMenu extends React.Component {
    displayName = 'SubMenu';

    onSelectMenu = (item) => {
        if (this.props.onSelectMenu) {
            this.props.onSelectMenu(this, item);
        }
    }

    render () {
        const {data, offset, onSelectSubMenu, onSelectMenu, level} = this.props;
        const clazzName = classNames('cm-menu-submenu', data.className, {
            'cm-menu-item-open': data.open,
            'cm-menu-item-selected': data.selected,
            'cm-menu-item-disabled': data.disabled
        });
        const sty = {};
        if (level) {
            sty.paddingLeft = offset * level;
        }
        return <li className={clazzName} style={data.style}>
            {
                level === 0
                    ? <Dropdown data={data.children} onSelect={this.onSelectMenu}>
                        <div className='cm-menu-submenu-title' style={sty}>
                            {data.text}
                            <Icon name='chevron-down' className='cm-menu-submenu-cert' size={14}/>
                        </div>
                    </Dropdown>
                    : <div className='cm-menu-submenu-title' onClick={onSelectSubMenu.bind(this, this, data)} style={sty}>
                        {data.text}
                        <Icon name='chevron-down' className='cm-menu-submenu-cert' size={14}/>
                    </div>
            }
            {
                level !== 0 && data.children && data.children.length
                    ? <Menu theme='' mode='' onSelectSubMenu={onSelectSubMenu} onSelectMenu={onSelectMenu} 
                        offset={offset} level={this.props.level} 
                        data={data.children} parent={data} style={{display: data.open ? '' : 'none'}}/>
                    : null
            }
        </li>;
    }
}

export default SubMenu;
